<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/" style="margin-bottom: 20px">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 模糊查询 -->
          <el-input placeholder="请输入用户名"  v-model="search" >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUserList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-bottom: 20px">
      <el-table :data="userData" height="450" stripe>
        <el-table-column label="用户名" prop="user_name"> </el-table-column>
        <el-table-column label="密码" prop="user_pw"></el-table-column>
        <el-table-column
          label="真实姓名"
          prop="user_fullname"
        ></el-table-column>
        <el-table-column label="个人介绍" prop="user_text"></el-table-column>
        <el-table-column label="头像" prop="face_image"></el-table-column>
        <el-table-column label="当前状态" prop="user_display">
          <template slot-scope="scope">
            <!-- scope.row拿到的是当前行的对象 -->
            <span v-if="scope.row.user_display == 0" style="color: red">停用</span>
            <span v-else-if="scope.row.user_display == 1" style="color: green">正常</span>
            <span v-else>未识别</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 插槽 -->
            <el-button
              type=""
              size="mini"
              @click="handleEdit2(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="handleDel(scope.$index, scope.row.user_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 对话标签 -->
    <!-- 用户添加 -->
    <el-dialog title="添加" :visible.sync="addDialogVisible" width="50%">
      <el-form :model="addForm">
        <el-form-item label="用户名">
          <el-input v-model="addForm.user_name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addForm.user_pw"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="addForm.user_fullname"></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-input v-model="addForm.face_image"></el-input>
        </el-form-item>
        <el-form-item label="个人介绍">
          <el-input v-model="addForm.user_text"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">确定</el-button>
      </span>
    </el-dialog>
    <!-- 用户编辑 -->
    <el-dialog title="修改" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="editForm">
        <el-form-item label="用户ID">
          <el-input v-model="editForm.user_id" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="editForm.user_name" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.user_pw"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="editForm.user_fullname"></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-input v-model="editForm.face_image"></el-input>
        </el-form-item>
        <el-form-item label="个人介绍">
          <el-input v-model="editForm.user_text"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editUser">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      search:'',
      addDialogVisible: false,
      editDialogVisible: false,
      userData: [],
      addForm: {
        user_name: "",
        user_pw: "",
        user_fullname: "",
        face_image: "",
        user_text: "",
        user_display: 1,
      },
      editForm: {
        user_id: "",
        user_name: "",
        user_pw: "",
        user_fullname: "",
        face_image: "",
        user_text: "",
        user_display: 1,
      },
     
    };
  },
  methods: {
    async getUserList() {
      let { data: res } = await this.$axios.get("/user/list",{
        params:{
          val:this.search
        }
      });
      //    window.console.log(JSON.stringify(res))

      this.userData = res.data;
    },
    async addUser() {
      // window.console.log(JSON.stringify(this.addForm));
      let { data: res } = await this.$axios.post("/user/add", this.addForm);
      window.console.log(res.mate.status); //目标值为200
      if (res.mate.status != 200) return this.$message.error(res.mate.msg);
      this.$message.success(res.mate.msg);
      // this.userData.push(this.addForm) dom节点刷新当前数据
      this.getUserList();
      this.addDialogVisible = false;
    },
    async handleDel(index, id) {
      // window.console.log(index+" "+row);
      let { data: res } = await this.$axios.get("/user/del", {
        params: {
          id: id,
        },
      });
      if (res.mate.status != 200) return this.$message.error(res.mate.msg);
      this.$message.success(res.mate.msg);
      this.getUserList();
    },
    // 修改的回显方法- dom渲染
    handleEdit(index, row) {
      // window.console.log(index);
      // window.console.log(row);
      this.editForm = row;
      this.editDialogVisible = true;
    },
    // 修改的回显方法- 接口获取dom渲染
    async handleEdit2(index, row) {
      let { data: res } = await this.$axios.get("/user/query", {
        params: {
          id: row.user_id,
        },
      });
      // console.log(res.data)
      if (res.mate.status != 200) return this.$message.error(res.mate.msg);
      this.editForm = res.data[0];
      this.editDialogVisible = true;
    },
    // 用户修改
    async editUser() {
      let { data: res } = await this.$axios.post("/user/update", this.editForm);
      if (res.mate.status != 200) return this.$message.error(res.mate.msg);
      this.$message.success(res.mate.msg);
      // window.console.log(res);
      this.getUserList();
      this.editDialogVisible = false;
    },
  },
  created() {
    this.getUserList();
  },
};
</script>